import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import { Layout, Menu, message } from 'antd';
import React, { useState } from 'react';
import { useAuth } from "../context/AuthProvider";
import { Switch } from 'react-router-dom';
import AuthRoute from '../components/AuthRoute';
import { UserOutlined, ToolOutlined, HomeOutlined, VideoCameraOutlined, MacCommandOutlined, UserSwitchOutlined } from '@ant-design/icons';
import { Avatar, Space } from 'antd';
import { Button, Dropdown, Modal } from 'antd';
import { Checkbox, Form, Input, Upload } from 'antd';
import axios from '../api/axios';


const { Header, Sider, Content } = Layout;
const Home = ({ history, location: { pathname }, routes }) => {
    const { user, deleteUser, setUser } = useAuth();
    const [collapsed, setCollapsed] = useState(false);
    const [url, setUrl] = useState(user.avatar ? 'http://localhost:1234/public/material/' + user.avatar : false)
    const go = ({ key }) => {
        history.push(key);
    }
    const onFinish = (values) => {
        console.log('Success:', values);
        axios.post(`/users/edit`, { ...values, userId: user.userId, avatar: user.avatar, id: user.id }).then(res => {
            setUser(res)
            message.success("信息修改成功")
        })
        setOpen(false)
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        onFinish()
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            setOpen(false);
        }, 3000);
    };
    const handleCancel = () => {
        setOpen(false);
    };
    const exit = () => {
        deleteUser()
    }
    const items = [
        {
            key: '1',
            label: (
                <div onClick={showModal}>
                    个人信息
                </div>
            ),
        },
        {
            key: '2',
            label: (
                <div onClick={exit}>
                    退出登录
                </div>
            ),
        }
    ];
    const props = {
        action: 'http://localhost:1234/users/vaddimg',
        onChange({ file, fileList }) {
            if (file.status !== 'uploading') {
                console.log(file.response)
                // setUser({ ...user, avatar: file.response.data })
                setUrl('http://localhost:1234/public/material/' + file.response)
                axios.post(`/users/edit`, { ...user, avatar: file.response }).then(res => {
                    setUser(res)
                    message.success("头像修改成功")
                })

            }
        },

        defaultFileList: [

        ],
    };
    return (
        <Layout>
            <Sider trigger={null} theme='dark' collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu
                    theme="dark"
                    onClick={go}
                    mode="inline"
                    selectedKeys={[pathname]}
                    items={[
                        {
                            key: '/',
                            icon: <HomeOutlined />,
                            label: '主页',
                        },
                        {
                            key: '/material',
                            icon: <VideoCameraOutlined />,
                            label: '素材管理',
                        },
                        {
                            key: '/user',
                            icon: <UserOutlined />,
                            label: '用户管理',
                        },
                        {
                            key: '/forum',
                            icon: <MacCommandOutlined />,
                            label: '论坛管理',
                        },
                        {
                            key: '/manager',
                            icon: <UserSwitchOutlined />,
                            label: '管理员管理',
                        },
                        {
                            key: '/feedback',
                            icon: <ToolOutlined />,
                            label: '用户反馈',
                        },

                    ]}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                        padding: 0,
                    }}
                >
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                    <Dropdown
                        menu={{
                            items,
                        }}
                        placement="bottom"
                    >
                        <Avatar className='avatar'
                            style={{ position: "absolute", right: "30px", top: "10px" }}
                            src={<img src={url ? url : "http://www.edu2act.cn/static/images/m.png"} alt="avatar" />}
                            size={50} icon={<UserOutlined />}
                        />

                    </Dropdown>
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: '500px',
                        height: 'auto'
                    }}
                >
                    <Switch>
                        {
                            routes.map((route, index) => {
                                return <AuthRoute key={index} {...route} />
                            })
                        }
                    </Switch>
                    <Modal
                        open={open}
                        title="修改个人信息"
                        onOk={handleOk}
                        onCancel={handleCancel}
                        footer={null}
                    >
                        <Avatar size={64} icon={<UserOutlined />} src={<img src={url ? url : "http://www.edu2act.cn/static/images/m.png"} alt="avatar" />} />
                        <Upload {...props}>
                            <Button icon={<UploadOutlined />}>修改头像</Button>
                        </Upload>
                        <Form
                            name="basic"
                            layout='vertical'
                            style={{
                                maxWidth: 400,
                                margin: '50px auto'
                            }}
                            initialValues={user}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >

                            <Form.Item
                                label="用户名"
                                name="name"
                            // initialValue={user.userName}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="pwd"
                            // initialValue={user.password}

                            >
                                <Input.Password />
                            </Form.Item>


                            <Form.Item
                                wrapperCol={{
                                    offset: 10,
                                    span: 24,
                                }}
                            >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </Content>
            </Layout>
        </Layout>
    )
}

export default Home;